<template>
  <div class="app-container">
    <!--查询表单-->
    <el-form :model="searchForm" ref="searchFormRef" :inline="true" label-width="68px">
      <el-form-item label="角色名" prop="roleName">
        <el-input v-model="searchForm.roleName" placeholder="请输入角色名"></el-input>
      </el-form-item>
      <el-form-item label="权限字符" prop="roleKey">
        <el-input v-model="searchForm.roleKey" placeholder="请输入权限字符"></el-input>
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-input v-model="searchForm.roleKey" placeholder="请输入权限字符"></el-input>
      </el-form-item>


      <el-form-item>
        <el-button type="primary" @click="handlerquery()">搜索</el-button>
        <el-button>重置</el-button>
      </el-form-item>
    </el-form>


    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd()"


        >新增
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          @click="handleUpdate"

        >修改
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          @click="handleDelete"

        >删除
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"


        >导出
        </el-button>
      </el-col>
      <!--     // <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>-->
    </el-row>
    <el-tooltip class="item" effect="dark" content="刷新" placement="top">
      <el-button size="mini" circle icon="el-icon-refresh"/>
    </el-tooltip>
    <div>

    </div>
    <el-table v-loading="loading"
              :data="allRoles" border
              style="width: 100%"
              @selection-change="handleSelectionChange"
              current-row-key="roleId">
      <el-table-column type="selection" width="55" />
      <el-table-column label="序号" type="index" width="80">
      </el-table-column>
      <el-table-column label="角色名" prop="roleName">
      </el-table-column>
      <el-table-column label="权限字符" prop="roleKey">
      </el-table-column>

      <el-table-column label="状态" prop="status">
        <template #default="{ row }">
          <el-switch
            v-model="row.status"
            :active-value="1"
            :inactive-value="0"
            @change="changeStatus(row.status,row.roleId)"
          />
        </template>
      </el-table-column>
      <el-table-column label="显示顺序" prop="sort">
      </el-table-column>
      <el-table-column
        :label="$t('msg.role.action')"
        prop="action"
        width="260"
        #default="{ row }"
      >
        <el-space>
          <el-button
            type="text"
            size="small"
            @click="onDistributePermissionClick(row)"
          >
            分配权限
          </el-button>

          <el-button
            type="text"
            size="small"
            @click="handleUpdate(row.roleId)"
          >
            修改
          </el-button>

          <el-button
            type="text"
            size="small"
            @click="handleDelete(row)"
          >
            删除
          </el-button>

        </el-space>

      </el-table-column>
    </el-table>


    <el-dialog v-model="DialogVisible" :title="title" width="500" center>
      <div>
        <el-form :model="form" ref="formRef" label-width="100px">
          <el-form-item label="角色名">
            <el-input v-model="form.roleName"></el-input>
          </el-form-item>
          <el-form-item label="权限字符">
            <el-input v-model="form.permission"></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="form.status" placeholder="请选择状态">
              <el-option label="启用" value="enabled"></el-option>
              <el-option label="禁用" value="disabled"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="显示顺序">
            <el-input v-model="form.order" type="number"></el-input>
          </el-form-item>
        </el-form>

      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="DialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSubmit()">
            Confirm
          </el-button>
        </div>
      </template>
    </el-dialog>
    <el-drawer v-model="distributePermissionVisible">
      <el-row justify="center">
        <el-space>
          <el-button @click="handleRole"  >确认</el-button>
          <el-button @click="handleRole">重置</el-button>

        </el-space>
        <div></div>
      </el-row>
      <!--      菜单列表-->
      <el-row style="margin-top: 25px">
        <div class="checkbox-group">
          <el-checkbox>展开/折叠</el-checkbox>
          <el-checkbox>全选/全不选</el-checkbox>
          <el-checkbox>父子联动</el-checkbox>
        </div>
        <el-card style="width: 100%; height: 500px;"> <!-- 设置宽度和高度 -->
          <div>
            <el-tree
              ref="treeRef"
              :data="menuTreeList"
              :props="props"
              node-key="menuId"
              show-checkbox
              default-expand-all>
            </el-tree>
          </div>
        </el-card>
      </el-row>
    </el-drawer>


    <!--    <distribute-permission-->
    <!--      v-model="distributePermissionVisible"-->
    <!--      :roleId="selectRoleId"-->
    <!--    ></distribute-permission>-->
  </div>
</template>

<script setup>
import { ref } from 'vue'
import DistributePermission from './components/DistributePermission.vue'
import { grantPermissions, list, roleList, addRole, getInfo, delRole } from '@/api/role'
import { MenuTreeList } from '@/api/menu'
import { ElMessage, ElMessageBox } from 'element-plus'

const allRoles = ref()
const searchForm = ref({
  roleName: '',
  roleKey: ''

})
const page = ref({
  size: 0

})
const menuTreeList = ref([])
const loading = ref(true)
const props = ref({
  label: 'menuName',
  children: 'children'
})
const title = ref('')
const ids = ref([]);


const selectRoleId = ref('')
const distributePermissionVisible = ref(false)
const DialogVisible = ref(false)
const form = ref({
  order: 0
})

const treeRef = ref(null)
const formRef = ref()


const onDistributePermissionClick = (row) => {
  console.log('弹窗点击了')
  selectRoleId.value = row.roleId
  console.log('弹窗点击了', selectRoleId.value, row)
  distributePermissionVisible.value = true
  MenuTreeList({
    roleId: row.roleId
  }).then((res) => {
    console.log('树形菜单数据', res)
    const { data } = res
    menuTreeList.value = data.menus
    treeRef.value.setCheckedKeys(data.checkedKeys, false)
  })
}
const getRoesList = async () => {
  loading.value = true
  const response = await list()
  const { data } = response
  allRoles.value = data
  debugger
  console.log('返回数据', data)
  loading.value = false
}
const handlerquery = () => {

  console.log(searchForm.value.roleName)  // 访问 roleName 属性
  console.log(searchForm.value.roleKey)   // 访问 roleKey 属性

}

const  reset=()=>{
  form.value={}
}
getRoesList()

const handleRole = (v) => {
  const menuId = treeRef.value.getCheckedKeys()
  console.log('选中的节点', menuId, '选中的', selectRoleId.value)


  grantPermissions({
    menuIds: menuId,
    roleId: selectRoleId.value
  }).then(res => {
    console.log(res)
  })
}
const handleUpdate = (roleId) => {
  title.value = '修改角色'
  debugger
  console.log(roleId)
  getInfo(roleId).then(response => {
    console.debug('getInfo', response)
    form.value = response.data
    DialogVisible.value = true

  })
}
const handleAdd = () => {
  DialogVisible.value = true
  title.value = '添加角色'
}
const handleSubmit = () => {
  DialogVisible.value = false
  console.log('表单数据：', form.value)
  addRole(form.value).then(respnose => {
    if (respnose.code == 200) {
      ElMessage.success('添加成功')
      reset()
      getRoesList()
    }

  })
}


const handleSelectionChange=(row)=>{

        ids.value=row.map(m=>{
        return m.roleId;})
    //  console.log("选中的行;",ids.value)
}


const handleDelete=(row)=>{
  const roleIds=  [ row.roleId]||ids.value
  ElMessageBox.confirm( `确定要删除角色编号为 \n[${roleIds}] \n的角色吗？删除后无法恢复。`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    delRole( JSON.stringify(roleIds) ).then(() => {
      ElMessage.success('删除成功')
      getRoesList()
    })
  }).catch(() => {
    ElMessage.info('已取消删除')
  })
}

const changeStatus=(status,roleId)=>{

}
</script>

<style lang="scss" scoped>
.checkbox-group {
  display: flex;
  align-items: center;
  gap: 10px; /* 控制间距 */
  //margin-top: 10px; /* 与按钮组的间距 */
}

</style>
